<template>
  <view>

    <view style="background-color: #F60;position: fixed;left: 0;width: 100%; top:0;z-index: 1;">
      <bar></bar>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center">
        <view class="gui-padding" style="padding-top: 0rpx;padding-right: 5rpx;" @click="back">
          <text class="gui-icons gui-color-white gui-h6">
            &#xe600;
          </text>
        </view>
        <view class="gui-padding" style="padding-top: 0rpx;padding-right: 5rpx;">
          <text class="gui-icons gui-color-white gui-h6">
            消息
          </text>
        </view>

        <gui-mp-navigation-spacing></gui-mp-navigation-spacing>
      </view>
    </view>

    <view>
      <bar></bar>
      <view style="height: 80rpx;">

      </view>

    </view>

    <view>
      <!-- IM 消息展示区 -->
      <gui-im-message :msgs="msgs" group="group1" :userid="user_id"></gui-im-message>
      <!-- 底部提交区 -->
      <gui-im-input @chooseImage="chooseImage" @sendText="sendText" @sendVoice="sendVoice"></gui-im-input>

    </view>


  </view>
</template>
<script>
  // 模拟消息数据
  import msgsData from '@/Grace6/demoData/immessages.js';
  export default {

    data() {
      return {
        msgs: [],
        user_id: '',
        user_nickname: '',
        target_id: '0'
      }
    },
    onLoad(e) {

      if (e.id) {
        this.target_id = e.id
      }

      var user = uni.gRequest.checkLogin(true);

      if (user) {
        this.user_id = user.user_id;
        this.user_nickname = user.user_nickname;

        this.initData();

      }





    },
    onShow() {
      this.pageScroll();
    },
    methods: {

      initData() {
        var self = this;
        uni.showLoading({
          title: "正在加载"
        })
        setTimeout(() => {
          uni.gRequest.get("chat/msgs", {
            user_id: self.user_id,
            target_id: self.target_id
          }).then(result => {
            result.data.forEach(x => {
              self.msgs.push(JSON.parse(x.msg_contont));
            });
            uni.hideLoading();
          });
        }, 1000)




        uni.$on("reciveMsg", function(data) {

          console.log("消息页面收到", data)

          if (data.sender_id == self.target_id) {
            self.msgs.push(data.contont);
          }
        })

      },
      // 01 发送文本消息
      sendText: function(text) {
        //提交给 IM 服务返回消息数据，添加到消息列表中
        //模拟IM 服务端返回消息
        var msg = {
          group: 'group1',
          uindex: this.user_id,
          uname: this.user_nickname,
          contentType: 'txt',
          uface: '/static/images/touxiang.png',
          content: text,
          date: '刚刚'
        }
        this.msgs.push(msg);
        this.pageScroll();

        uni.sendSocketMessage({
          data: JSON.stringify({
            type: "msg",
            sender_id: this.user_id,
            target_id: this.target_id,
            contont: msg
          })
        });

      },
      // 02 选择图片
      chooseImage: function(res) {


        console.log("选择的图片", res);


        var self = this;

        uni.uploadFile({
          url: uni.gRequest.server + 'file/upload',
          filePath: res,
          name: 'file',
          success: (uploadResult) => {

            var msg = {
              group: 'group1',
              uindex: self.user_id,
              uname: self.user_nickname,
              contentType: 'img',
              uface: '/static/images/touxiang.png',
              content: JSON.parse(uploadResult.data).url,
              date: '刚刚'
            }
            self.msgs.push(msg);
            self.pageScroll();

            uni.sendSocketMessage({
              data: JSON.stringify({
                type: "msg",
                sender_id: self.user_id,
                target_id: self.target_id,
                contont: msg
              })
            });



          }

        })



      },
      back() {
        uni.navigateBack()
      },
      // 03 发送语音消息
      sendVoice: function(voice, vlength) {
        console.log(voice);
        // 录音后返回临时语音文件
        // 请提交给 IM 服务器上传，上传后会产生真实语音文件地址，
        // 具体逻辑视 IM 后端情况来实现
        // 然后 IM 服务返回消息数据，添加到消息列表中
        // 模拟IM 服务端返回消息
        var msg = {
          group: 'group1',
          uindex: '10000',
          uname: '老兵张嘎',
          contentType: 'voice',
          uface: 'https://images.unsplash.com/photo-1662695089339-a2c24231a3ac?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=60',
          content: voice,
          length: vlength,
          date: '刚刚'
        }
        this.msgs.push(msg);
        this.pageScroll();
      },
      // 滚动条滚动 [ 有新消息可以自动滚动到底部 ]
      pageScroll: function() {
        setTimeout(() => {
          uni.pageScrollTo({
            scrollTop: 999999 + Math.random(),
            duration: 100
          })
        }, 200);
      }
    },
  }
</script>
<style scoped>
</style>
